<!-- template中有且仅又一个根标签 -->
<template>
    <div>
        <h1>用户列表管理</h1>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="userId" label="编号" width="180" />
            <el-table-column prop="username" label="姓名" width="180" />
            <el-table-column prop="password" label="密码" />

            <el-table-column fixed="right" label="Operations" width="120">
                <!-- 自定义模板，实现原理就是slot-->
                <template #default="scope">
                    <el-button
                    link
                    type="primary"
                    size="small"
                    >
                  
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
				<el-pagination
					background
					layout="total, prev, pager, next"
					:current-page="query.pageIndex"
					:page-size="query.pageSize"
					:total="pageTotal"
					@current-change="handlePageChange"
				></el-pagination>
		</div>
    </div>
</template>

<script lang="ts" setup>
import {ref,reactive} from "vue"; 
import { qeuryUser } from '../api/user';

//查询数据
const query = reactive({
	name: '',
	pageIndex: 1, //第几页
	pageSize: 5  //每页的数量
});
//绑定的对象数据model数据
const tableData = ref([])
const pageTotal = ref(0)

//查询
const getData = ()=>{
    qeuryUser(query).then(res=>{
        tableData.value = res.data.data.list //内容
        pageTotal.value = res.data.data.total//总数
        console.log(tableData.value)
    })
}
// 分页导航
const handlePageChange = (val: number) => {
	query.pageIndex = val;
	getData();
};

getData()
const deleteRow = (scope: any) => {
    //scope.row 可以获取当前行的数据
    //scope.$index 是当前行的下标
    console.log(scope.row.date)
    tableData.value.splice(scope.$index, 1)
}
</script>